<div id="app">
    <nz-layout class="layout">
        <!-- 头部 -->
        <nz-header class="header">
            <div class="wrap">
                <!-- 左侧导航栏 -->
                <div class="left">
                    <h1>Music</h1>
                    <ul nz-menu nzTheme="dark" nzMode="horizontal">
                        <li nz-menu-item>发现</li>
                        <li nz-menu-item>歌单</li>
                    </ul>
                </div>

                <!-- 右侧搜索框 -->
                <div class="right">
                    <div class="search">
                        <nz-input-group [nzPrefix]="PrefixIconSearch">
                            <input type="text" placeholder="歌单/歌手/歌曲">
                        </nz-input-group>
                        <!-- 搜索图标模板 -->
                        <ng-template #PrefixIconSearch>
                            <i nz-icon [nzIconfont]="'icon-search'" class="icon-search"></i>
                        </ng-template>
                    </div>
                    <!-- 登录区域  -->
                    <div class="member">
                        <div class="no-login">
                            <ul nz-menu nzTheme="dark" nzMode="horizontal">
                                <li nz-submenu nzTitle="登录">
                                    <div></div>
                                    <ul>
                                        <li nz-menu-item>注册</li>
                                        <li nz-menu-item>登录</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>

            </div>

        </nz-header>
        <!-- 中间内容 -->
        <nz-content class="content">
            <router-outlet>

            </router-outlet>
        </nz-content>
        <!-- 底部 -->
        <nz-footer>
            Ant Design @2021 Implement By Angular
        </nz-footer>
    </nz-layout>
</div>
<app-wy-player></app-wy-player>